import {Fragment} from 'react';

import bgPattern from 'sentry-images/spot/mobile-hero.jpg';
import onboardingFrameworkSelectionJavascript from 'sentry-images/spot/replay-dead-rage-changelog.svg';

import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
import * as Storybook from 'sentry/stories';

export default Storybook.story('NegativeSpaceContainer', story => {
  story('Empty', () => (
    <Fragment>
      <p>
        A <Storybook.JSXNode name="NegativeSpaceContainer" /> is a container with a
        diagonal pattern for a background. It will preserve the aspect ratio of whatever
        is inside it. It's a flex element, so the children are free to expand/contract
        depending on whether things like <kbd>flex-grow: 1</kbd> are set.
      </p>
      <p>Here's one with nothing inside it:</p>
      <NegativeSpaceContainer
        style={{width: '100%', height: '100px'}}
        data-test-id="empty-container"
      />
    </Fragment>
  ));

  story('Centered in a fixed space', () => (
    <NegativeSpaceContainer style={{width: '600px', height: '200px'}}>
      <img src={bgPattern} />
    </NegativeSpaceContainer>
  ));

  story('Transparent Content', () => (
    <NegativeSpaceContainer>
      <img src={onboardingFrameworkSelectionJavascript} />
    </NegativeSpaceContainer>
  ));
});
